<template>
  <view class="popupPreviewbox">
    <view
     :class="['end-msg',detail.auditStatus == 5 ? 'return-msg' : '']"
      v-if="detail.auditStatus == 3 || detail.auditStatus == 5"
    >
      <view class="end-msg-header">
        <view 
          :class="['end-msg-left',returnUp?'':'over']"
        >
          {{ detail.auditStatus == 3 ? "终止原因:" : "退回理由:"
          }}{{ infoMsg || "无" }}
        </view>
        <scroll-view scroll-y="true" style-="height: 800rpx;">
            <view
        class="end-msg-img"
        v-if="detail.imgs && detail.imgs.length"
      >
      <image v-for="(item,index) in detail.imgs" :key="index" :src="item.url"
      ></image>
       
      </view>
        </scroll-view>
     
    </view>
    <view>向上收起</view>
  </view>
  </view>
</template>

<script>
export default {
	props:{
		detail:{
			type:Object,
			default:()=>{
				return {};
			}
		},
      
	},
	data() {
		return {};
	},

};
</script>

<style lang="scss" scoped>
.popupPreviewbox{
    // height: 800rpx;
    border-radius: 16rpx 16rpx 0 0;
}
.end-msg {
  background: #ffe3e3;
  border-radius: 8rpx;

  width: calc(100% - 80rpx);
  margin: 0rpx auto;
  color: #e02020;
  padding: 8rpx 20rpx;
  font-size: 24rpx;
  .end-msg-header {
    .end-msg-left {
      width: 600rpx;
   
    }
    .over{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .end-msg-right {
      display: flex;
      flex: 1;
      justify-content: flex-end;
    }
  }
  .end-msg-img {
    padding: 14rpx 56rpx;
    image{
      width: 100%;
    }
  }
}

</style>
